<template>
  <view class="inquiry-page">
    <scroll-view
      scroll-y
      class="record-list"
      @scrolltolower="loadMore"
      :refresher-enabled="true"
      :refresher-triggered="loading"
      @refresherrefresh="onRefresh"
    >
      <view v-if="recordList.length" class="list-wrap">
        <view
          class="record-item"
          v-for="item in recordList"
          :key="item.id"
          @tap="goDetail(item.id)"
        >
          <view class="item-head">
            <text class="type">极速问诊</text>
            <text class="status">{{ item.statusValue }}</text>
          </view>
          <view class="item-body">
            <image
              :src="item.docInfo?.avatar || '/static/images/doctor-avatar.png'"
              class="doc-avatar"
              mode="aspectFill"
            />
            <view class="info">
              <view class="title">
                <text class="name">{{ item.docInfo?.name || '暂未分配医生' }}</text>
                <text class="tag">{{ item.docInfo?.positionalTitles }}</text>
              </view>
              <text class="dep">{{ item.docInfo?.depName || '暂无科室信息' }}</text>
            </view>
          </view>
          <view class="item-foot">
            <text class="time">{{ item.createTime }}</text>
            <text class="amount">￥{{ item.pament?.toFixed(2) }}</text>
          </view>
        </view>
      </view>
      <u-empty v-else text="暂无问诊记录" mode="data" />
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { getConsultRecordAPI } from '@/api/consult'
  import type { ConsultRecord } from '@/types/consult'

  const loading = ref(false)
  const recordList = ref<ConsultRecord[]>([])
  const current = ref(1)
  const pageSize = ref(10)
  const total = ref(0)

  // 获取问诊记录列表
  const getRecordList = async (isReset = false) => {
    if (isReset) {
      current.value = 1
      recordList.value = []
    }
    loading.value = true
    try {
      const res = await getConsultRecordAPI({
        current: current.value.toString(),
        pageSize: pageSize.value.toString(),
        type: '2', // 极速问诊
      })
      total.value = res.total
      recordList.value.push(...res.rows)
      console.log('问诊记录:', recordList.value)
    } catch (error) {
      uni.showToast({
        title: '获取问诊记录失败',
        icon: 'none',
      })
    } finally {
      loading.value = false
    }
  }

  // 下拉刷新
  const onRefresh = () => {
    getRecordList(true)
  }

  // 加载更多
  const loadMore = () => {
    if (recordList.value.length >= total.value) return
    current.value++
    getRecordList()
  }

  // 跳转详情
  const goDetail = (id: string) => {
    uni.navigateTo({
      url: `/subpkg_medical/inquiry/detail?id=${id}`,
      success: () => {
        console.log('跳转成功，ID:', id)
      },
      fail: (error) => {
        console.error('跳转失败:', error)
      },
    })
  }

  onMounted(() => {
    getRecordList()
  })
</script>

<style lang="scss">
  .inquiry-page {
    min-height: 100vh;
    background-color: #f6f7f9;

    .record-list {
      height: 100vh;
      padding: 20rpx;
    }

    .record-item {
      background-color: #fff;
      border-radius: 20rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;

      .item-head {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20rpx;

        .type {
          color: #16c2a3;
          font-size: 30rpx;
        }

        .status {
          color: #666;
          font-size: 28rpx;
        }
      }

      .item-body {
        display: flex;
        margin-bottom: 20rpx;

        .doc-avatar {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          margin-right: 20rpx;
        }

        .info {
          flex: 1;

          .title {
            margin-bottom: 10rpx;

            .name {
              font-size: 32rpx;
              margin-right: 20rpx;
            }

            .tag {
              color: #666;
              font-size: 26rpx;
            }
          }

          .dep {
            color: #666;
            font-size: 26rpx;
          }
        }
      }

      .item-foot {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .time {
          color: #999;
          font-size: 26rpx;
        }

        .amount {
          color: #ff6b35;
          font-size: 32rpx;
        }
      }
    }
  }
</style>
